const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
	resolve: {
		extensions: [".ts", ".js", ".jsx", ".tsx", ".json"],
		alias: {
			'@': path.resolve(__dirname, './src'),
			// '@api': resolve('src/api'),
			// '@components': resolve('src/components'),
			// '@assets': resolve('src/assets'),
			// '@store': resolve('src/store'),
			// '@utils': resolve('src/utils'),
		}
	},
	//打包环境，测试环境还是生产环境，不添加会报警告
	mode: 'development',
	//相对路径
	entry: {
		app: './src/index.tsx'
	},
	//输出配置
	output: {
		//输出在项目根目录的dist文件夹，会自动创建
		path: path.resolve(__dirname, './dist'),
		//js的文件名称
		filename: '[name].bundle.js',
	},
	plugins: [
		new CleanWebpackPlugin(),
		new HtmlWebpackPlugin({
			//模板路径，注意需要和index.html路径对应
			template: path.resolve(__dirname, './public/index.html'),
			//文件名称
			filename: 'index.html',
		})
	],
	module: {
		rules: [
			{
				test: /\.(js|jsx|ts|tsx)$/,   //解析jsx
				loader: 'babel-loader',
				exclude: /node_modules/
			},
			{
				test: /\.(s[ac]ss|css|less)$/i,
				use: [
					'style-loader',
					'css-loader',
					{
						loader: 'sass-loader',
						options: {
							additionalData: '@use "sass:math";',
						},
					},
				],
			},
			{
				// 如果使用 webpack，可以通过配置 @svgr/webpack 来将 svg 图标作为 React 组件导入
				test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
				use: [
					{
						loader: 'babel-loader',
					},
					{
						loader: '@svgr/webpack',
						options: {
							babel: false,
							icon: true,
						},
					},
				],
			},
			{
				test: /\.(ts|tsx)$/,
				loader: 'ts-loader',
				exclude: /node_modules/, // 指定要排除的文件
				options: {
					configFile: path.resolve(__dirname, './tsconfig.json')
				}
			}


		],
	},


}